<template>
  vue3.0
  <HelloWorld v-if="isShow"></HelloWorld>
  <h1>{{ name }}</h1>
  <h1>{{ age }}</h1>
  <h1>{{ obj.type }}</h1>
  <h1>{{ obj.salay }}</h1>
  <h1>{{ obj.a.b }}</h1>
  <button @click="sayHi">hello</button>
  <button @click="editInfo">修改人的信息</button>
  <button @click="add">增加</button>
  <button @click="del">删除</button>
  <button @click="isShow=!isShow">是否显示</button>

</template>

<script>
import {ref, reactive, watch, watchEffect} from 'vue'
import HelloWorld from "@/components/HelloWorld";

export default {
  name: 'App',
  components: {HelloWorld},
  beforeCreate() {
    console.log(`执行了beforeCreate`)
  },
  created() {
    console.log(`执行了created`)
  },
  beforeUpdate() {
    console.log(`执行了beforeUpdate`)
  },
  updated() {
    console.log(`执行了updated`)
  },
  beforeMount() {
    console.log(`执行了beforeMount`)
  },
  mounted() {
    console.log(`执行了mounted`)
  },
  beforeUnmount() {
    console.log(`执行了beforeUnmount`)
  },
  unmounted() {
    console.log(`执行了unmounted`)
  },
  setup() {
    let isShow = ref(true)
    let name = ref('张三')
    let age = ref('12')
    let obj = reactive({
      type: '前端工程师',
      salay: '30K',
      a: {
        b: [
          234, 345, 345
        ]
      }
    })

    function sayHi() {
      console.log('大家好,我叫' + name.value + '我年龄是' + age.value)
    }

    function add() {
      age.value = '56'
      obj.a.b[3] = 908098
    }


    function del() {
      delete obj.type
    }

    function editInfo() {
      name.value = '李四'
      age.value = '34'
      obj.type = 'UI工程师'
      obj.salay = '60K'
      obj.a.b[0] = 345345354
    }

    watch(age, (newValue, oldValue) => {
      console.log(`age的数据改变了,${oldValue}====${newValue}`)
    })

    watchEffect(() => {
      const x1 = age.value
      console.log('watchEffect所值的回调执行了' + x1)
    })
    return {name, age, isShow, sayHi, editInfo, obj, add, del}
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
